<template>
  <div>
    <el-drawer title="导入详情" v-model="visible" :size="1000">
      <template #header>
        <div class="flex items-center title">
          <div class="w-[5px] h-[5px] rounded-[50%] bg-[#3721FF] mr-[10px] circle"></div>
          <div class="tits">导入详情</div>
        </div>
      </template>
      <div class="w-full h-[1px] bg-[#EFEFEF] line"></div>
      <div class="pt-[30px]">
        <ContentWrap :show-border="false">
          <SearchBox
            :queryForm="searchList"
            :showExpland="false"
            :show-export="false"
            queryBtnText="搜索"
            @query="handleSearchQuery"
          />
        </ContentWrap>
        <ContentWrap :show-border="false">
          <el-table :data="tableData">
            <el-table-column label="订单号" prop="orderNo">
              <template #default="{ row }">
                {{ row.orderNo || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="是否成功" prop="successFlag">
              <template #default="{ row }">
                {{ row.successFlag ? '成功' : '失败' }}
              </template>
            </el-table-column>
            <el-table-column label="失败原因 " prop="reason">
              <template #default="{ row }">
                {{ row.reason || '-' }}
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            v-model:limit="queryParams.pageSize"
            v-model:page="queryParams.pageNo"
            :total="total"
            @pagination="getList"
          />
        </ContentWrap>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import type { TradeOrderQueryVO } from '@/api/mall/trade/order'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { getUserPage } from '@/api/system/user'
import { getUserPageNew } from '@/api/member/user'

const props = defineProps({
  row: {
    type: Number,
    required: true,
    default: 0
  }
})

const form = reactive({
  remark: '',
  id: ''
})

const createNameList = ref([])

const total = ref(0)

const searchList = ref<TradeOrderQueryVO[]>([
  {
    label: '创建者',
    code: 'creator',
    type: 'select',
    options: createNameList.value
  },

  {
    label: '是否成功',
    code: 'successFlag',
    type: 'select',
    options: [
      {
        label: '是',
        value: 1
      },
      {
        label: '否',
        value: 0
      }
    ]
  }
])

const initQueryParams = {
  pageNo: 1, // 页数
  pageSize: 15, // 每页显示数量
  creatName: '',
  successFlag: '',
  logId:props.row.id
}

const queryParams = ref({ ...initQueryParams })

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  console.log(val, 'handleSearchQuery')
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  getList()
}

const tableData = ref([])

const visible = ref(false)

const isInit = ref(false)

const getList = async () => {
  isInit.value = true
  try {
    const res = await TradeOrderApi.getOrderChangeLogDetailPage(queryParams.value)
    tableData.value = res.list
    total.value = res.total
  } finally {
  }
}

onUnmounted(() => {
  isInit.value = false
})

//查询部门人员
const getCreateNameList = async () => {
  const res = await getUserPageNew({
    pageNo: 1,
    pageSize: 99
  })
  createNameList.value = res.map((item) => {
    return {
      label: item.nickname,
      value: item.id
    }
  })
  searchList.value.map((item) => {
    if (item.code === 'creator') {
      item.options = createNameList.value
    }
  })
}
const show = () => {
  visible.value = true
  nextTick(() => {
    queryParams.value.logId = props.row.id
    getList()
    getCreateNameList()
  })
}

const hide = () => {
  visible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}
</style>
